<template>
  <div class="container">
    <scroll-view scroll-y="true" style="height: 100vh;">
      <div class="header">
        <div class="headerTitle">填写信息</div>
        <!-- <div class="headerDescribe">请如实填写注册信息，以便教材准确发放</div> -->
        <div class="headerIdentity">
          {{identity}}
          <div class="pickTea">
            <picker @change="handIdentityPickerChange" :range="identityList" style="flex: 1;">
              <view class="picker">
                <!-- <span>{{ hasChoGradeName }}</span>
                <span class="imageIcon"></span>-->
              </view>
            </picker>
          </div>
        </div>
      </div>
      <div class="mainContentArea">
        <div class="absBox">
          <i>*</i>
          <b>姓名</b>
          <input
            type="text"
            v-model="sse"
            maxlength="20"
            placeholder="请填写真实姓名"
            placeholder-style="color: #BBB;fontWeight: normal;"
          />
        </div>
        <div class="absBox">
          <i>*</i>
          <b>城市</b>
          <picker
            mode="multiSelector"
            @change="handleCityChange"
            @columnchange="changeCityNextCol"
            :value="cityIndex"
            :range="cityArr"
            style="flex: 1;"
          >
            <view class="picker">
              <span v-if="isChangeChoCity">{{ choCityName }}</span>
              <span v-else style="color: #BBB;">请选择所在城市</span>
              <span class="imageIcon"></span>
            </view>
          </picker>
        </div>
        <div class="absBox">
          <i>*</i>
          <b>学校</b>
          <picker @change="handleSchoolPickerChange" :range="schoolList" style="flex: 1;">
            <view class="picker" :style="hasChoSchoolName === '请选择所在学校' ? 'color: #BBB;' : ''">
              <span>{{ hasChoSchoolName }}</span>
              <span class="imageIcon"></span>
            </view>
          </picker>
        </div>
        <div class="absBox" v-if="identityId != 6 && identityId != 7">
          <i>*</i>
          <b>年级</b>
          <picker @change="handleGradePickerChange" :range="gradeList" style="flex: 1;">
            <view class="picker" :style="hasChoGradeName === '请选择所在年级' ? 'color: #BBB;' : ''">
              <span>{{ hasChoGradeName }}</span>
              <span class="imageIcon"></span>
            </view>
          </picker>
        </div>
        <div class="absBox" v-if="identityId != 6 && identityId != 7 && identityId != 5 ">
          <i>*</i>
          <b>班级</b>
          <picker @change="handleClassPickerChange" :range="classList" style="flex: 1;">
            <view class="picker" :style="hasChoClassName === '请选择所在班级' ? 'color: #BBB;' : ''">
              <span>{{ hasChoClassName }}</span>
              <span class="imageIcon"></span>
            </view>
          </picker>
        </div>
        <div class="absBox" v-if="identityId != 6 && identityId != 7 && identityId != 5 ">
          <b>班级备注</b>
          <input
            type="text"
            v-model="classRemark"
            maxlength="40"
            placeholder="请输入您的班级备注"
            placeholder-style="color: #BBB;fontWeight: normal;"
            style="text-align: right;"
          />
        </div>
      </div>
      <div class="nextBtn" @click="handleNextDo">下一步</div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sse: "",
      identityId:'',
      identity: "选择您的身份",
      schoolList: [],
      areaSchoolList: [],
      hasChoSchoolName: "请选择所在学校",
      cascadeAreaList: [],
      cityIndex: [0, 0, 0], // 下标集合
      cityArr: [],
      isChangeChoCity: false,
      choCityName: "",
      provinceid: "", // 省
      cityid: "", // 市
      areaid: "", // 区
      identityList: ["班主任", "年级主任", "教务主任", "校长"],
      gradeList: ["高一", "高二", "高三"],
      allGradeList: [
        {
          name: "高一",
          value: "1"
        },
        {
          name: "高二",
          value: "2"
        },
        {
          name: "高三",
          value: "3"
        }
      ],
      gradeid: "",
      hasChoGradeName: "请选择所在年级",

      classList: [],
      hasChoClassName: "请选择所在班级",
      classNames: "",
      classRemark: "" // 班级备注
    };
  },
  mounted() {
    Object.assign(this.$data, this.$options.data())
    wx.removeStorageSync("registerMsg");
    this.getCascadeAreaList();
    this.createClassNames();
  },
  methods: {
    // 选择学校
    handIdentityPickerChange(e) {
      const index = e.target.value;
      this.identity = this.identityList[index];
      this.identity === '班主任' ? this.identityId = 3 : this.identity === '年级主任'? this.identityId = 5 : this.identity === '教务主任'? this.identityId = 6 : this.identity === '校长'? this.identityId = 7 : this.identityId = ''
      console.log('this.identityId: ', this.identityId)

    },
    handleSchoolPickerChange(e) {
      const index = e.target.value;
      this.hasChoSchoolName = this.schoolList[index];
      this.schoolid = this.areaSchoolList[index].schoolId;
    },
    changeCityNextCol(e) {
      this.cityIndex[e.target.column] = e.target.value;
      // mulArr[0]的值是不会随用户操作变更的，因此不需要改变
      // mulArr[1]的值是由 mulIndex[0]的值决定的
      this.cityArr.splice(
        1,
        1,
        this.cascadeAreaList[this.cityIndex[0]].list.map(v => {
          return v.lable;
        })
      );
      // mulArr[2]的值是由 muIndex[1]的值决定的
      this.cityArr.splice(
        2,
        1,
        this.cascadeAreaList[this.cityIndex[0]].list[
          this.cityIndex[1]
        ].list.map(v => {
          return v.lable;
        })
      );
    },
    // 选择省市区
    handleCityChange(e) {
      if (!this.isChangeChoCity) this.isChangeChoCity = true;
      this.hasChoSchoolName = "请选择所在学校";
      this.cityIndex = e.target.value;
      let cityName = "";
      // 获取省份ID
      let lineOne = this.cascadeAreaList[this.cityIndex[0]]; // 省份这一列的选中数据
      this.provinceid = lineOne.id;
      cityName += lineOne.lable;
      // 获取城市ID
      let lineTwo = lineOne.list[this.cityIndex[1]]; // 城市这一列的选中数据
      this.cityid = lineTwo.id;
      cityName = cityName + ", " + lineTwo.lable;
      // 获取区域ID
      let lineThree = lineTwo.list[this.cityIndex[2]];
      this.areaid = lineThree.id;
      cityName = cityName + ", " + lineThree.lable;
      this.choCityName = cityName;
      this.getAreaSchoolList();
    },
    // 获取省市区数组
    getCascadeAreaList() {
      this.$httpWX
        .post({
          url: "/shengxueApi/area/getCascadeArea",
          header: {
            "content-type": "application/json", // 默认值
            "Api-Version": "1.2.0"
          }
        })
        .then(res => {
          this.cascadeAreaList = res.data;
          this.cityArr[0] = this.cascadeAreaList.map(v => {
            return v.lable;
          });
          this.cityArr[1] = this.cascadeAreaList[this.cityIndex[0]].list.map(
            v => {
              return v.lable;
            }
          );
          this.cityArr[2] = this.cascadeAreaList[this.cityIndex[0]].list[
            this.cityIndex[1]
          ].list.map(v => {
            return v.lable;
          })
          console.log('this.cityArr: ', this.cityArr)
        })
    },
    // 获取区域内学校的信息
    getAreaSchoolList() {
      this.$httpWX
        .get({
          url: "/shengxueApi/area/getSchoolsById/" + this.areaid,
          header: {
            "content-type": "application/json", // 默认值
            "Api-Version": "2.0.1"
          }
        })
        .then(res => {
          this.areaSchoolList = res.data;
          const arr = [];
          for (const item of res.data) {
            arr.push(item.schoolName);
          }
          this.schoolList = arr;
        });
    },
    createClassNames() {
      let singleClassName = "";
      for (let i = 1; i < 101; i += 1) {
        singleClassName = i + "班";
        this.classList.push(singleClassName);
      }
    },
    handleClassPickerChange(e) {
      const index = e.target.value
      this.hasChoClassName = this.classList[index]
      this.classNames = this.classList[index]
    },
    handleGradePickerChange(e) {
      const index = e.target.value;
      this.hasChoGradeName = this.gradeList[index];
      this.gradeid = this.allGradeList[index].value;
    },
    // 点击下一步
    handleNextDo() {
      if (!this.identityId) {
        wx.showToast({
          title: "请先选择您的身份",
          icon: "none"
        })
        return 
      }
      if (this.identityId) {
          if (!this.sse) {
            wx.showToast({
              title: "请输入真实姓名",
              icon: "none"
            })
            return 
          } 
          if ( !this.provinceid || !this.cityid || !this.areaid  ) {
            wx.showToast({
              title: "请选择所在城市",
              icon: "none"
            })
            return
          }   
          if ( !this.schoolid ) {
            wx.showToast({
              title: "请选择所在学校",
              icon: "none"
            })
            return
          }
      }
      if (this.identityId === 3 || this.identityId === 5 ) {
        if (!this.gradeid) {
          wx.showToast({
            title: "请选择所在年级",
            icon: "none"
          })
          return
        } 
      }
      if (this.identityId === 3) {
        if (!this.classNames) {
          wx.showToast({
            title: "请选择所在班级",
            icon: "none"
          })
          return
        }
      }
      if (this.identityId === 3) {
         this.obj = {
          areaId: this.areaid,
          cityId: this.cityid,
          className: this.classNames,
          gradeId: this.gradeid,
          name: this.sse,
          provinceId: this.provinceid,
          schoolId: this.schoolid,
          classRemark: this.classRemark,
          userType: this.identityId
        }
      } else if (this.identityId === 5) {
        this.obj = {
          areaId: this.areaid,
          cityId: this.cityid,
          gradeId: this.gradeid,
          name: this.sse,
          provinceId: this.provinceid,
          schoolId: this.schoolid,
          userType: this.identityId
        }
      } else {
        this.obj = {
          areaId: this.areaid,
          cityId: this.cityid,
          name: this.sse,
          provinceId: this.provinceid,
          schoolId: this.schoolid,
          userType: this.identityId
        }
      }
       wx.setStorage({
          key: "registerMsg",
          data: JSON.stringify(this.obj)
        })
        wx.navigateTo({ url: "../sendCodeRegister/main" })
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding: 35rpx 54rpx 0 70rpx;
  box-sizing: border-box;
  .header {
    margin-bottom: 59rpx;
    .headerTitle {
      color: #27282c;
      font-size: 50rpx;
      font-weight: bold;
      margin-bottom: 39rpx;
    }
    .headerDescribe {
      color: #999;
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 35rpx;
    }
    .headerIdentity {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      color: #fff;
      font-size: 36rpx;
      font-weight: bold;
      background: #ffad0d;
      border-radius: 10rpx;
      position: relative;
      .pickTea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100rpx;
        opacity: 0;
        .picker {
          width: 100%;
          height: 100rpx;
        }
      }
    }
  }
  .mainContentArea {
    min-height: 724rpx;
    .absBox {
      width: 100%;
      height: 104rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 1rpx solid #e5e5e5;
      i{
        color: #FFAD0D;
        // vertical-align: middle;
        margin-right: 10rpx;
      }
      b {
        color: #282828;
        font-size: 30rpx;
        font-weight: bold;
        margin-right: 35rpx;
        vertical-align: middle;
      }
      input {
        flex: 1;
        font-size: 30rpx;
        color: #222;
      }
      .picker {
        color: #222;
        font-size: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .imageIcon {
          width: 32rpx;
          height: 32rpx;
          background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -1170rpx -2011rpx;
          background-size: 746rpx 350rpx;
        }
      }
    }
  }
  .nextBtn {
    margin: 100rpx auto 0;
    width: 320rpx;
    height: 88rpx;
    border-radius: 44rpx;
    line-height: 88rpx;
    text-align: center;
    color: #fff;
    background: #ffad0d;
    font-size: 30rpx;
    font-weight: bold;
  }
}
</style>
